import React from 'react';
import { NavBar, Icon, List, InputItem, Button } from 'antd-mobile';

import './AddMySpot.css';

const Item = List.Item;

export default class AddMySpot extends React.Component {
    state = {
        name: '',
        address: '',
        spotId: '',
        img: ''
    }

    submit() {
        const mySpot = this.props.mySpot;
        mySpot.push(this.state);
        this.props.submit(mySpot);
        this.props.click();
    }
    
    componentDidMount() {
        const that = this;
        document.getElementById('upload').addEventListener('change', function (e) {
            const files = this.files;
            const img = new Image();
            img.className = 'update-image';
            const reader = new FileReader();
            reader.readAsDataURL(files[0]);
            reader.onload = function (e) {
                const mb = (e.total / 1024) / 1024;
                if (mb >= 2) {
                    alert('文件大小大于2M');
                    return;
                }
                img.src = this.result;
                img.style.width = "80%";
                const dom = document.getElementById('spot-image');
                dom.innerHTML = '';
                dom.appendChild(img);
                that.setState({
                    img: './parking-spot-img/2.jpg'
                })
            }
        });
    }

    render() {
        return (
            <div className="add-spot-box">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={this.props.click}
                >新增车位</NavBar>
                <List>
                    <InputItem
                        clear
                        placeholder="请输入停车场名称"
                        onChange={(name) => { this.setState({ name }) }}
                    >停车场名称</InputItem>
                    <InputItem
                        clear
                        placeholder="请输入停车场地址"
                        onChange={(address) => { this.setState({ address }) }}
                    >停车场地址</InputItem>
                    <InputItem
                        clear
                        placeholder="请输入车位号"
                        onChange={(spotId) => { this.setState({ spotId }) }}
                    >车位号</InputItem>
                    <Item extra={
                        <div id="spot-image">
                            <img className='add-spot-img' src="./parking-spot-img/add.png" alt="上传图片" />
                            <input type="file" className="hide" id="upload" />
                        </div>
                    }>车位照片</Item>
                </List>
                {this.state.name.length && this.state.address && this.state.spotId && this.state.img ?
                    <Button type="primary" className="reservation-form-submit" onClick={this.submit.bind(this)}>确定</Button> :
                    <Button type="primary" className="reservation-form-submit" disabled>确定</Button>
                }
            </div>
        )
    }
}